<template>
    <view class="app-container pay">
        <zzk-nav title="设置支付方式"></zzk-nav>
        <view class="pay-box">
            <view class="pay-panel">
                <view class="pay-line flexrow" v-for="(item, index) in list" :key="index">
                    <view class="left">
                        <text class="label">{{ item.label }}</text>
                    </view>
                    <view class="value">
                        <u-checkbox-group
                            v-model="item.payTypes"
                            placement="row"
                            @change="$event => checkboxChange($event, index)"
                        >
                            <u-checkbox
                                v-for="(child, key) in select"
                                labelSize="14"
                                :customStyle="{ marginLeft: '8px' }"
                                :key="key"
                                :label="type[child]"
                                :name="child"
                            >
                            </u-checkbox>
                        </u-checkbox-group>
                    </view>
                </view>
            </view>
            <view class="pay-btn">
                <u-button text="确定" type="error" :loading="loading" @click="onSubmit"></u-button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import { clientLevelPaymentTypes, setPayment } from '@/api/merchant.js'
import { clientLevel } from '@/utils/status.js'
import { showToast, backpage } from '@/utils/util'

const store = useStore()
const merchantId = computed(() => store.state.user.merchantId)

const list = ref([])
const select = ref(['PRE_PAY', 'POST_PAY'])
const type = ref({
    'PRE_PAY': '先付',
    'POST_PAY': '后付'
})
const loading = ref(false)

onLoad(() => {
    for (const [key, value] of Object.entries(clientLevel)) {
        list.value.push({
            id: '',
            label: value,
            key,
            payTypes: key === 'LV1_RETAIL' ? ['PRE_PAY'] : ['PRE_PAY', 'POST_PAY']
        })
    }
    
    getPayType()
})

const getPayType = () => {
    clientLevelPaymentTypes().then(res => {
        res.forEach(item => {
            let index = list.value.findIndex(value => value.key === item.level)
            list.value[index].payTypes = [...item.payTypeList]
            list.value[index].id = item.id
        })
    })
}

const checkboxChange = (e, index) => {
    list.value[index].payTypes = [...e]
}

const onSubmit = () => {
    const data = []
    let str = ''
    list.value.forEach((item, index) => {
        if (item.payTypes.length === 0 && !str) {
            str = `未选择${item.label}的支付方式`
        }
        const obj = {
            level: item.key,
            payTypes: item.payTypes.join(','),
            merchantId: merchantId.value
        }
        if (item.id) {
            obj.id = item.id
        }
        data.push(obj)
    })
    if (str) {
        showToast(str)
        return false
    }
    
    loading.value = true
    setPayment(data).then(res => {
        showToast('设置成功', () => {
            backpage()
            loading.value = false
        })
    }).catch(e => {
        loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.pay {
    &-box {
        padding: 20rpx $zzk-margin 0;
    }
    &-panel {
        background-color: #fff;
        padding: 20rpx;
        border-radius: 8rpx;
    }
    &-line {
        align-items: center;
        height: 80rpx;
        .left {
            flex: 1;
        }
        .label {
            font-size: 28rpx;
            line-height: 40rpx;
        }
    }
    &-btn {
        padding-top: 40rpx;
    }
}
</style>